<template>
  <view class="auth-container">
    <!-- 顶部背景 -->
    <view class="auth-header">
      <view class="header-bg"></view>
      <!-- 返回按钮放在青色背景区域的左上角 -->
      <view class="back-btn-container" @click="goBack">
        <image src="/static/back.png" class="back-icon" mode="aspectFit" />
      </view>
      <view class="header-content">
        <text class="title">招聘方认证</text>
        <text class="subtitle">请输入邀请码完成身份验证</text>
      </view>
    </view>

    <!-- 邀请码输入 -->
    <view class="auth-form">
      <view class="invite-code-section">
        <text class="section-title">邀请码</text>
        <input 
          class="plain-code-input" 
          v-model="inviteCode" 
          placeholder="请输入6位邀请码"
          maxlength="6"
          :class="{ error: showError }"
        />
        <!-- 错误提示 -->
        <view class="error-message" v-if="showError">
          <text class="error-text">{{ errorMessage }}</text>
        </view>
        <!-- 验证按钮 -->
        <button 
          class="verify-btn" 
          :class="{ disabled: !canVerify }"
          :disabled="!canVerify"
          @click="verifyInviteCode"
        >
          {{ verifying ? '验证中...' : '验证邀请码' }}
        </button>
        <!-- 重新获取邀请码 -->
        <view class="resend-section" v-if="showResend">
          <text class="resend-text">邀请码已失效？</text>
          <text class="resend-link" @click="resendInviteCode">重新获取</text>
        </view>

        <!-- 使用说明（同模块内） -->
        <view class="help-block">
          <text class="help-title">使用说明</text>
          <view class="help-item">
            <text class="help-dot">•</text>
            <text class="help-text">邀请码为6位字母数字组合</text>
          </view>
          <view class="help-item">
            <text class="help-dot">•</text>
            <text class="help-text">每个邀请码仅可使用1次</text>
          </view>
          <view class="help-item">
            <text class="help-dot">•</text>
            <text class="help-text">邀请码有效期为30天</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { verifyInviteCodeApi } from '../../api/invite.js'
export default {
  data() {
    return {
      inviteCode: '',
      verifying: false,
      showError: false,
      errorMessage: '',
      showResend: false
    }
  },
  computed: {
    canVerify() {
      return this.inviteCode.length === 6 && !this.verifying
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    onCodeInput(e) {
      // 该方法已不需要，可删除
    },
    
    async verifyInviteCode() {
      if (!this.canVerify) return
      
      this.verifying = true
      this.showError = false
      
      try {
        // [接口调用位置] 调用后端验证接口
        const result = await this.callVerifyAPI(this.inviteCode)
        
        if (result.success) {
          // 验证成功，保存认证状态
          uni.setStorageSync('recruitAuth', {
            inviteCode: this.inviteCode,
            companyId: result.companyId,
            authTime: Date.now()
          })
          
          uni.showToast({
            title: '验证成功',
            icon: 'success'
          })
          
          // 跳转到招聘主界面
          setTimeout(() => {
            uni.redirectTo({
              url: '/pages/recruit/index'
            })
          }, 1500)
          
        } else {
          this.showError = true
          this.errorMessage = result.message || '邀请码验证失败'
          
          // 如果是邀请码失效，显示重新获取选项
          if (result.code === 'INVALID_CODE') {
            this.showResend = true
          }
        }
        
      } catch (error) {
        this.showError = true
        this.errorMessage = '网络错误，请重试'
      } finally {
        this.verifying = false
      }
    },
    
    async callVerifyAPI(code) {
      // [接口调用位置] 实际后端接口调用
      const data = await verifyInviteCodeApi(code)
      return data
    },
    
    resendInviteCode() {
      uni.showModal({
        title: '重新获取邀请码',
        content: '请联系企业管理员重新获取邀请码',
        showCancel: false,
        confirmText: '我知道了'
      })
    }
  }
}
</script>

<style scoped>
.auth-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f0f9f4 0%, #e8f5e8 100%);
  position: relative;
}

.auth-header {
  position: relative;
  height: 360rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  background: transparent;
}

.header-bg {
  display: none;
}

/* 返回按钮容器 - 定位在青色背景区域的左上角 */
.back-btn-container {
  position: absolute;
  top: 98rpx;
  left: 36rpx;
  z-index: 10;
  width: 64rpx;
  height: 64rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(16, 185, 129, 0.15);
  border-radius: 50%;
  border: 1rpx solid rgba(16, 185, 129, 0.2);
  transition: all 0.3s ease;
}

.back-icon {
  width: 36rpx;
  height: 36rpx;
  opacity: 0.8;
  transition: opacity 0.3s ease;
  filter: brightness(0);
}

.back-btn-container:hover {
  background: rgba(16, 185, 129, 0.25);
  border-color: rgba(16, 185, 129, 0.3);
}

.header-content {
  position: relative;
  z-index: 1;
  color: #333333;
  text-align: center;
}

.title {
  display: block;
  font-size: 52rpx;
  font-weight: 700;
  margin-bottom: 20rpx;
  text-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  letter-spacing: 2rpx;
}

.subtitle {
  font-size: 30rpx;
  opacity: 0.95;
  font-weight: 400;
  text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.auth-form {
  padding: 32rpx 32rpx 64rpx;
  max-width: 1200rpx;
  margin: -120rpx auto 0;
  position: relative;
  z-index: 2;
}

.invite-code-section {
  background: #fff;
  border-radius: 40rpx;
  padding: 64rpx 64rpx 52rpx;
  margin-bottom: 40rpx;
  border: 2rpx solid rgba(0, 179, 134, 0.15);
  min-height: 460rpx;
}

.section-title {
  font-size: 36rpx;
  color: #2c3e50;
  font-weight: 700;
  margin-bottom: 32rpx;
  text-align: center;
  position: relative;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -12rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 60rpx;
  height: 4rpx;
  background: linear-gradient(90deg, #00b386, #00d4a3);
  border-radius: 2rpx;
}

.plain-code-input {
  width: 100%;
  height: 108rpx;
  border: 2rpx solid rgba(0, 179, 134, 0.15);
  border-radius: 24rpx;
  font-size: 36rpx;
  font-weight: 500;
  padding: 0 36rpx;
  margin-bottom: 36rpx;
  background: #fff;
  box-sizing: border-box;
  letter-spacing: 4rpx;
  text-align: center;
}

.plain-code-input.error {
  border-color: #ff6b7a;
  background: rgba(255, 107, 122, 0.05);
}

.plain-code-input:focus {
  border-color: rgba(0, 179, 134, 0.4);
}

.plain-code-input::placeholder {
  color: #9aa5b1;
  font-weight: 400;
  letter-spacing: 1rpx;
}

.verify-btn {
  width: 100%;
  height: 90rpx;
  background: #00b386;
  color: white;
  border-radius: 60rpx;
  font-size: 34rpx;
  font-weight: 700;
  border: none;
  margin-bottom: 36rpx;
  letter-spacing: 2rpx;
}

.verify-btn.disabled {
  background: #d4dae0;
  color: #8b95a1;
  cursor: not-allowed;
}

.error-message {
  text-align: left;
  margin: -8rpx 0 28rpx;
}

.error-text {
  color: #ff6b7a;
  font-size: 28rpx;
  font-weight: 500;
  display: flex;
  align-items: center;
}

.error-text::before {
  content: '⚠️';
  margin-right: 8rpx;
  font-size: 24rpx;
}

.resend-section {
  text-align: center;
  padding-top: 28rpx;
  margin-top: 20rpx;
  border-top: 1rpx solid rgba(0, 179, 134, 0.1);
}

.resend-text {
  font-size: 28rpx;
  color: #6c7b8a;
  margin-right: 16rpx;
}

.resend-link {
  font-size: 28rpx;
  color: #333333;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2rpx solid #00b386;
  transition: all 0.3s ease;
}

.resend-link:hover {
  color: #00d4a3;
  border-bottom-color: #00d4a3;
  transform: translateY(-1rpx);
}

.help-block {
  margin-top: 32rpx;
  padding: 32rpx 28rpx 20rpx;
  background: #f8fcfb;
  border-radius: 24rpx;
  border: 1rpx solid rgba(0, 179, 134, 0.12);
}

.help-title {
  font-size: 30rpx;
  color: #2c3e50;
  font-weight: 700;
  margin-bottom: 24rpx;
  display: flex;
  align-items: center;
}

.help-title::before {
  content: '💡';
  margin-right: 12rpx;
  font-size: 28rpx;
}

.help-item {
  flex-direction: row;
  display: flex;
  align-items: flex-start;
  margin-bottom: 16rpx;
}

.help-dot {
  color: #333333;
  font-size: 24rpx;
  margin-right: 16rpx;
  margin-top: 6rpx;
  font-weight: 900;
}

.help-text {
  font-size: 28rpx;
  color: #5a6c7d;
  line-height: 1.6;
  font-weight: 400;
}
</style> 